<template>
  <div class="header">
    <div>
      <h1 @click="() => $router.push('/')">Haier</h1>
      <div v-for="(item, index) in data" :key="index" class="nav-1">
        <span @click="clickItem(item)">{{
          item.label
        }}</span>
        <div class="nav-2">
          <div v-for="(nav2, i) in item.children" :key="i">
            <span @click="clickItem(nav2)">{{
              nav2.label
            }}</span>
            <div v-if="nav2.children">
              <template v-if="nav2.children[0].children.length == 0">
                <div class="nav-3">
                  <span  @click="clickItem(nav2)">{{
                    nav2.label
                  }}</span>
                  <div v-for="(nav4, index) in nav2.children" :key="index">
                    <span @click="clickItem(nav4)">{{
                      nav4.label
                    }}</span>
                  </div>
                </div>
              </template>
              <template v-else>
                <div
                  v-for="(nav3, index) in nav2.children"
                  :key="index"
                  class="nav-3"
                >
                  <span @click="clickItem(nav3)">{{
                    nav3.label
                  }}</span>
                  <div v-for="(nav4, index) in nav3.children" :key="index">
                    <span  @click="clickItem(nav4)">{{
                      nav4.label
                    }}</span>
                  </div>
                </div>
              </template>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="right-comm">
      <ul>
        <li>
          <!-- <search-box placeholder="输入需要搜索的商品"/> -->
          <input type="text" placeholder="输入需要搜索的商品" />
        </li>
        <li>
          <i class="el-icon-search"></i>
        </li>
        <li style="margin-left: 30px">
          <i class="el-icon-shopping-cart-2"></i>
        </li>
        <li style="margin-left: 30px; cursor: pointer">
          <i
            ><i
              class="el-icon-s-custom"
              @click="() => $router.push('/login')"
            ></i
          ></i>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    clickItem(item) {
      this.$emit("item-click", item);
    },
  },
  props: {
    data: Array,
  },
};
</script>

<style scoped>
.header {
  width: 70%;
  margin: 0 auto;
}
h1:hover {
  cursor: pointer;
}
.header * {
  display: inline-block;
}

.header :first-child > h1 {
  position: relative;
  padding-right: 30px;
  color: #004ea1;
  bottom: -5px;
}

.header > :last-child {
  position: relative;
  left: 10%;
}

.nav-1 span {
  cursor: pointer;
  color: #333;
}

.nav-1 {
  position: relative;
  padding-left: 25px;
  padding-right: 25px;
  padding-bottom: 20px;
}

.nav-1 > span {
  font-weight: bold;
  font-size: 0.9em;
  line-height: 0px;
}

.nav-1:hover {
  padding-bottom: 12px;
  border-bottom: 5px solid #004ea1;
}

.nav-1:hover > .nav-2 {
  display: block;
}

.nav-2 {
  position: absolute;
  left: 0;
  padding-top: 20px;
  width: inherit;
  z-index: 999;
  display: none;
}

.nav-2 > div {
  width: 100%;
  padding-top: 10px;
  padding-bottom: 20px;
  color: black;
  font-weight: normal;
  text-indent: 10px;
  background-color: #f1f3f4;
}

.nav-2 span {
  font-size: 0.85em;
}

.nav-2 > div > div:last-of-type {
  position: absolute;
  top: 0px;
  left: 100%;
  width: 600px;
  bottom: 0;
  background-color: white;
  display: none;
}

.nav-2 > div:hover {
  background-color: white;
}

.nav-2 > div:hover > :last-child {
  display: inline-block;
}

.nav-3 {
  display: block;
  margin-top: 20px;
  margin-left: 50px;
  text-indent: 0px;
}

.nav-3 > :first-child {
  display: block;
  font-size: 0.85em;
  color: #004ea1;
}

.nav-3 div {
  position: relative;
  width: 20%;
  margin: 10px;
  margin-left: 0px;
}

.nav-3 span {
  position: relative;
  display: inline-block;
  font-size: 0.8em;
}

.nav-3 span:hover {
  color: #004ea1;
}

.right-comm {
  position: absolute;
  top: 25px;
  display: inline-block;
  width: 200px;
  height: 20px;
  z-index: 99;
}

.right-comm > :nth-child(1) {
  position: absolute;
  top: -20px;
  right: -150px;
}
</style>